<template>
  <div class="demo">
      <el-rate v-model="rate" :disabled="!mixEditable"  :allow-half="showHalf" :show-score="showRateScore" :max="maxScore" @change="handleChangeScore"></el-rate>
  </div>
</template>

<script>
import { strToBoolean } from '@/utils/util'
export default {
  name: "switch",
  components: {},
  props: {
    value: {},
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
     allowHalf: {
      type: [String, Boolean],
      default: false,
    },
    showScore: {
      type: [String, Boolean],
      default: false,
    },
    max: {
      type: [String, Number],
      default: 5,
    }
  },
  data() {
    return {
     rate: 0,
     iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'],
    };
  },
  computed: {
    maxScore() {
      return Number(this.max)
    },
    showHalf() {
      return strToBoolean(this.allowHalf)
    },
    showRateScore() {
      return strToBoolean(this.showScore) 
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
    readonlyScore() {
      return this.readonly || this.$attrs.readonly
    }
  },
 watch: {
    value: {
      immediate: true,
      handler(val) {
        if (val) {
          this.rate = val
        }
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleChangeScore(score) {
      this.$emit('input', score)
    }
  },
};
</script>
<style lang="scss" scoped>
.demo {
  width: 100%;
}
</style>
